前端之Angular2实战:理解Angular2

原文地址，这里

笔者有一阵子没关注Angular2，记得上次关注还是alpha.36，现在已经变成了alpha.44，多了好多东西啊。譬如<div [x]="3" (y)="z()" />是啥意思呢？本篇文章即是对Angular2中的一些常见语法进行讲述。对于基本的Angular2的开发环境搭建，可以查看本博客的Angular2实战系列内容。

Component({  
  selector: 'app-main'
})
.View({
  template: `<h1>Hello</h1>`
})
.Class({
  constructor: function() {}
});

输入与输出

在Angular2中整个指令与整个逻辑之间的联系被大大简化，一个指令，现在更确切的叫法应该是组件，可以绑定到任何的对象并且可以触发整个逻辑可以监听到的事件。首先我们暂时以template模块来解释基本的原理：

Component({  
  selector: 'app-main'
})
.View({
  template: `<h1>Hello</h1>`
})
.Class({
  constructor: function() {
    this.msg = 'world';
  }
});

` 符号允许我们在JS中以多行方式撰写字符串

如果是在jQuery领域，应该如何将msg变量与div变量相关联，可能会采用如下的方式：

$('div').textContent = msg;

Angular2中也是采用很类似的方式，可以将某个变量绑定到div的内容上：

.View({
  template: `<div bind-text-content="msg"></div>`
})

更进一步的是，可以将其他属性也绑定：

.View({
  template: `
    <div 
      bind-text-content="msg" 
      bind-style.background="'red'">
    </div>
  `
})

事件

讨论过基本的绑定之后，我们可以看看怎么在input域中绑定变化：

<div  
  bind-text-content="msg" 
  bind-style.background="color">
</div>  
<input on-keyup="color = $event.target.value" />  

而如果需要实时查看变化，可以用类似于on-change：

on-change="changeColor()"

等等，这并不是Angular2

说到这边，上边的用法并不是Angular2推荐的一些语法，而是一些语法糖。可以使用[text-content]来替代bind-text-content，用(keyup)来代替on-keyup。

<div [text-content]="msg" [style.background]="color"></div>  
<input (keyup)="color = $event.target.value" />  

真正的组件

上文中提及的div已经是一个很不错的组件的代表，而这边所要介绍的真正的组件跟它也是非常的类似。它可以接收一系列的属性并且触发一系列的事件。同样的，我们可以把某个DOM节点映射到某个变量，譬如：

<div #my-div>Hello</div>  
<input (keyup)="myDiv.style.background = $event.target.value" /> 

这些是什么鬼？

我们以一个简单地例子：

<template [ng-if]='true'>
  <span>Hello</span>
  <p>World</p>
</template>

Sidenote - 注入...

上述演示估摸着会失败，可以在这个playground中自己尝试下。因为独立的指令必须要导入并且注入到工程中，以下为例，我们首先要在文件头部导入：

import { NgFor, NgIf } from 'angular2/angular2';

然后注入到@View的装饰器中：

directives: [NgFor, NgIf]

回归逻辑

<template [ng-if]='true'>
  <span>Hello</span>
  <p>World</p>
</template>

上面是演示了NgIf的用法，而对于NgRepeat(现在变成了NgFor)：

<template ng-for bind-ng-for-of='[1,2,3]'>
  <span>Hello</span>
  <p>World</p>
</template>

而如果要使用每次的迭代值：

<template ng-for  
          bind-ng-for-of='[1,2,3]' 
          var-v='$implicit' 
          var-i='index'>
  <span>Index: {{ i }}</span>
  <span>Value: {{ v }}</span>
</template>  

如果直接用语法糖的话，大概是这样：

<template ng-for  
          [ng-for-of]='[1,2,3]' 
          #v='$implicit' 
          #i='index'>
  <span>Index: {{ i }}</span>
  <span>Value: {{ v }}</span>
</template>  

不过这样看起来还是很丑，所以很多时候我们会将template包裹在一个根节点里面：

<div template="ng-for #v of [1,2,3]; #i=index">  
  <span>Index: {{ i }}</span>
  <span>Value: {{ v }}</span>
</div>  

当然，如果要进一步美化的话，那就变成了：

<div *ng-for="#v of [1,2,3]; #i=index">..  
  <span>Index: {{ i }}</span>
  <span>Value: {{ v }}</span>
</div>